<template>
  <view>
    <view class="details">
      <text>姓名（工号）: {{ realName }} ({{ staffNum }})</text>
      <text>部门: {{ deptName }}</text>
      <text>岗位: {{ postName }}</text>
      <text>培训内容: {{ content }}</text>
      <text>学时: {{ classHours }}</text>
      <text>开始时间: {{ startDate }}</text>
      <text>结束时间: {{ endDate }}</text>
      <text>培训地点: {{ address }}</text>
      <text>举办单位: {{ organizingUnit }}</text>
      <text>是否有协议: {{ isAgreement ? "是" : "否" }}</text>
      <text>证书名称: {{ certificateName }}</text>
      <text>培训理由: {{ reasons }}</text>
      <text>备注: {{ remark || "—" }}</text>
    </view>
  </view>
</template>

<script>
import { getTraining } from "@/api/work/training";

export default {
  data() {
    return {
      realName: "",
      staffNum: "",
      deptName: "",
      postName: "",
      content: "",
      classHours: "",
      startDate: "",
      endDate: "",
      address: "",
      organizingUnit: "",
      isAgreement: false,
      certificateName: "",
      reasons: "",
      remark: "",
    };
  },
  onLoad(options) {
    const id = options.id;
    this.fetchDetails(id);
  },
  methods: {
    fetchDetails(id) {
      getTraining(id).then((response) => {
        const data = response.data;
        this.realName = data.realName;
        this.staffNum = data.staffNum;
        this.deptName = data.deptName;
        this.postName = data.postName;
        this.content = data.content;
        this.classHours = data.classHours;
        this.startDate = data.startDate;
        this.endDate = data.endDate;
        this.address = data.address;
        this.organizingUnit = data.organizingUnit;
        this.isAgreement = data.isAgreement;
        this.certificateName = data.certificateName;
        this.reasons = data.reasons;
        this.remark = data.remark || "—";
      });
    },
  },
};
</script>

<style scoped>
/* 页面整体样式 */
view {
  padding: 20px;
  background-color: #f5f5f5;
}

/* 返回按钮样式 */
.back-button {
  font-size: 16px;
  color: #007aff;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

/* 详情内容样式 */
.details {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 文字样式 */
text {
  display: block;
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
  word-wrap: break-word;
}
</style>
